<template>
	<view class="content">
		<!-- top info -->
		<view class="smail_title">{{ info.name }}</view>
		<!-- scan code -->
		<view class="scan_code_box">
			<image @click="scanCode" class="btn" src="~@/static/shop/scan_btn.png" mode="widthFix"></image>
			<view class="desc">扫码核单</view>
			<view v-if="showManage" class="manage_btn" @click="toDetail('/pages/shop/look')">核销员管理</view>
			<!-- <view class="new_manage_btn"><view class="blue"></view></view> -->
		</view>
		<!-- destroy_box -->
		<view class="destroy_box" :class="{ empty: isEmpty }">
			<view class="flex between title_box">
				<view class="title">核销统计</view>
				<view class="desc">总核销：{{ statistics.length }}张</view>
			</view>
			<view class="line"></view>
			<uni-table v-if="statistics.length" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center" width="25%">项目名称</uni-th>
					<uni-th align="center" width="25%">用户名称</uni-th>
					<uni-th align="center" width="25%">订单状态</uni-th>
					<uni-th align="center" width="25%">确认时间</uni-th>
				</uni-tr>
				<uni-tr v-for="item in statistics" :key="item.id">
					<uni-td align="center">{{ item.project | projectName }}</uni-td>
					<uni-td align="center">{{ item.user | userName }}</uni-td>
					<uni-td align="center">{{ item.order_status == 20 ? '已核销' : '待核销' }}</uni-td>
					<uni-td align="center">{{ item.confirm_time | getTimeByString }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<!-- bottom bar -->
		<view class="bar_box">
			<view class="bar_box_content flex">
				<image class="server_logo" src="~@/static/shop/server.png" mode="widthFix"></image>
				<view class="server_title" @click="connectServer">联系客服</view>
				<view v-if="!showManage" class="server_btn flex" @click="loginout">退出登录</view>
				<view v-else class="server_btn flex" @click="toDetail('/pages/merchant/recruitment?store_id=' + id)">编辑门店信息</view>
			</view>
		</view>
	</view>
</template>

<script>
import Moment from '@/common/moment.min.js';
export default {
	filters: {
		projectName(info = {}) {
			try {
				return info.name || '';
			} catch (e) {
				return '';
			}
		},
		userName(info = {}) {
			try {
				return info.username || info.nickname || '';
			} catch (e) {
				return '';
			}
		},
		getTimeByString(time = '') {
			console.debug(time);
			if (!time) return '';

			try {
				return Moment(time).format('MM-DD HH:mm');
			} catch (e) {
				return '';
			}
		}
	},
	data() {
		return {
			showManage: true,
			id: '',
			info: {},
			statistics: []
		};
	},
	computed: {
		isEmpty() {
			return !this.statistics.length;
		}
	},
	// manage == 0 时，核销员登录，不显示  核销员管理按钮
	onLoad({ id, manage }) {
		this.id = id || '';
		if (this.id) {
			this.getDetail();
			this.getStatistics();
		} else {
			this.$api.msg('无效商户');
		}

		this.showManage = manage != 0;
	},
	methods: {
		connectServer() {
			uni.makePhoneCall({
				phoneNumber: '0755-23345349'
			});
		},
		toDetail(url = '') {
			uni.navigateTo({ url });
		},
		scanCode() {
			const that = this;
			uni.scanCode({
				success: function(res) {
					if (res.result) that.confirmOrder(JSON.parse(res.result));
					else
						uni.showToast({
							title: '无效二维码',
							icon: 'none'
						});
				},
				fail(err) {
					uni.showToast({
						title: '扫码失败',
						icon: 'none'
					});
				}
			});
		},
		/**
		 * 核销订单
		 */
		async confirmOrder(info = {}) {
			const userinfo = uni.getStorageSync('userinfo');
			info.confirm_admin_id = userinfo.id;
			info.confirm_type = this.showManage ? 1 : 2;
			try {
				const res = await this.$http.post('confirmOrder', info);
				this.$api.msg('核销成功');
				this.getStatistics();
			} catch (e) {
				this.$api.msg((e || {}).msg || '核销失败');
			}
		},
		async getDetail() {
			const res = await this.$http.post('shopDetail', { id: this.id });
			let info = res.data || {};
			info = JSON.parse(JSON.stringify(info).replaceAll('null', '""'));
			this.info = info;
		},
		async getStatistics() {
			const res = await this.$http.post('statistics', { store_id: this.id });
			let data = res.data || [];
			data = JSON.parse(JSON.stringify(data).replaceAll('null', '""'));
			this.statistics = [...data];
			this.$forceUpdate();
			
			/// 开发使用
			// if(process.env.NODE_ENV == 'development'){
			// 	this.statistics = [
			// 		{
			// 			order_status:20,
			// 			confirm_time:'2020-10-10 03:10:49',
			// 			user:{
			// 				username:'jackjackjackjackjackjackjackjackjackjackjackjackjackjack'
			// 			},
			// 			project:{
			// 				name:'123'
			// 			}
			// 		}
			// 	]
			// 	this.$forceUpdate();
			// }
		},
		loginout() {
			this.$store.dispatch('newLoginout');
			uni.redirectTo({
				url:'/pagesuser/public/login'
			})
		}
	}
};
</script>

<style scoped lang="scss">
$Pwidth:30rpx;
.content {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 10rpx $Pwidth;
}

.smail_title {
	font-size: 28rpx;
	line-height: 1.2;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #211817;
	padding: 24rpx 0;
}

.scan_code_box {
	/* width: 638rpx; */
	height: 248rpx;
	background: #D2D2D2;
	border-radius: 14rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
	.desc {
		font-size: 25rpx;
		color: #ffffff;
		margin-top: 15rpx;
	}
	.btn {
		width: 118rpx;
		height: 118rpx;
	}
	.manage_btn {
		background-color: #f22424;
		position: absolute;
		right: 15rpx;
		top: 15rpx;
		font-size: 26rpx;
		padding: 8rpx 10rpx;
		border-radius: 8rpx;
		color: #fff;
	}
	.new_manage_btn{
		position: absolute;
		right: -$Pwidth;
		top: $Pwidth;
		width: 169rpx;
		height: 103rpx;
		background: #EEEEEE;
		box-shadow: 0rpx 0rpx 9rpx 4rpx rgba(0, 0, 0, 0.11);
		border-radius: 52rpx 0 0 52rpx;
		box-sizing: border-box;
		padding: 15rpx;
		.blue{
			width: 72rpx;
			height: 72rpx;
			background: #1D2088;
			border-radius: 50%;
		}
	}
}

.destroy_box {
	/* width: 638rpx; */
	min-height: 382rpx;
	box-shadow: 0rpx 0rpx 19rpx 0rpx rgba(0, 0, 0, 0.03);
	border-radius: 14rpx;
	margin: 35rpx 0;
	padding: 24rpx 20rpx;
	font-family: Microsoft YaHei;
	background-color: #ffffff;

	&.empty {
		background: url(~@/static/shop/empty.png) no-repeat #fff center 82rpx;
		background-size: 276rpx 258rpx;
	}

	.title {
		font-weight: bold;
		color: #333333;
	}
	.desc {
		font-size: 22rpx;
		color: #999999;
	}
	.line {
		height: 2rpx;
		background: #f1efef;
		margin: 8rpx 0 15rpx;
	}
	.title_box {
		padding: 0 8rpx;
		font-size: 28rpx;
	}
}

$barHeight:132rpx;
.bar_box {
	height: $barHeight;
	.bar_box_content {
		width: 100vw;
		height: $barHeight;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		justify-content: space-between;
		font-size: 26rpx;
		padding: 0 72rpx 0 103rpx;
		box-shadow: 0rpx 0rpx 19rpx 0rpx rgba(0, 0, 0, 0.03);
		.server_logo {
			width: 42rpx;
			height: 42rpx;
		}
		.server_title {
			margin: 0 76rpx 0 12rpx;
		}
		.server_btn {
			background: url(~@/static/shop/server-bg.png) no-repeat transparent;
			background-size: 100% 100%;
			width: 342rpx;
			height: 76rpx;
			color: #fff;
			font-size: 26rpx;
			line-height: 1;
			justify-content: center;
		}
	}
}

::v-deep .uni-table-th,
::v-deep .uni-table-td {
	font-size: 28rpx;
	padding: 12rpx 4rpx;
	max-width: 100rpx!important;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	word-break: break-all;
}

.flex {
	display: flex;
	align-items: center;
}
.between {
	justify-content: space-between;
}
</style>
